import React from 'react'
import { Carousel, WingBlank,NavBar,Icon,Card,WhiteSpace, Button,Grid } from 'antd-mobile'
import './index.less';
import Footer from '../../components/Footer/index';
import axios from '../../axios/index'
const data1=[      
    {icon: require(`../../resource/images/grid-1.png`), text: "签到"},
    {icon: require(`../../resource/images/grid-2.png`), text: "增值服务"},
    {icon: require(`../../resource/images/grid-3.png`), text: "服务网点"},
    {icon: require(`../../resource/images/grid-4.png`), text: "咨询服务"}  
  ]
// const data1 = Array.from(new Array(4)).map((_val, i) => ({
//     icon: require(`../../resource/images/grid-${i+1}.png`),
//     text: `name${i}`,
//   }));
  const data2 = Array.from(new Array(12)).map((_val, i) => ({
    icon: require(`../../resource/images/grid-1.png`),
    text: `name${i}`,
  }));
export default class Main extends React.Component{
 
    state = {
        data: ['AiyWuByWklrrUDlFignR', 'TekJlZRVCjLFexlOCuWn', 'IJOtIlfsYdTyaDTRVrLI'],
        imgHeight: 176,
        imagesData:[
            {'imgsrc':'1','name':'车险','brief':'全面保障  出行无忧'},
            {'imgsrc':'2','name':'意外险','brief':'杜绝风险  健康生活'}
        ],
        data2:[]
      }
      componentDidMount() {
        this.getUserFunc();
      }
      getUserFunc=()=>{
          axios.ajax({
              url:'/api/v1/customer_service/user/functions',
              method:'get',
              data:{}
          }).then((res)=>{
              if(res.code===0){
                if(res.data){
                    this.setState({
                        data2:res.data
                    });
                }
              }
           
          }).catch((err)=>{

          });
          
      }
      handleSwitchTo=(el,index)=>{
        console.log(index);
        if(index === 0){
           this.props.history.push({pathname:'/checkinRecord'});
        }else if(index===1){
            this.props.history.push({pathname:'/main'});
        }else if(index===2){
            this.props.history.push({pathname:'/amap'});
        }
      }
    render(){
        return(
            <div style={{marginBottom:'50px'}}>
                <NavBar
                    mode="light"
                    leftContent="返回"
                    icon={<Icon type="left" />}
                    onLeftClick={() => {
                        const {history}=this.props;
                    history.push({pathname:'/login'})
                }}
                    rightContent={[
                        <Icon key="1" type="ellipsis" />,
                    ]}
                >首页</NavBar>
                <Carousel
                    autoplay={false}
                    infinite
                >
                {this.state.data.map(val => (
                    <a
                    key={val}
                    href="http://www.alipay.com"
                    style={{ display: 'inline-block', width: '100%', height: this.state.imgHeight }}
                    >
                    <img
                        src={`https://zos.alipayobjects.com/rmsportal/${val}.png`}
                        alt=""
                        style={{ width: '100%', verticalAlign: 'top' }}
                        onLoad={() => {
                        // fire window resize event to change height
                        window.dispatchEvent(new Event('resize'));
                        this.setState({ imgHeight: 'auto' });
                        }}
                    />
                    </a>
                ))}
                </Carousel>
                <Grid data={data1} hasLine={false}
                        onClick={this.handleSwitchTo}    
                    >                                
                </Grid>
                {this.state.imagesData.map(val=>(
                    <div key={val.imgsrc}>
                    <WhiteSpace size="md" />
                    <Card full='true'>
                        <Card.Header
                            title={
                                <div> 
                                    <span style={{fontSize:'14px'}}>{val.name}</span>
                                    <span style={{fontSize:'12px',color:'#999999'}}>{val.brief}</span>
                                </div>
                            }
                        />
                        <Card.Body>
                            <div>
                                <img alt="" src={require(`../../resource/images/card-${val.imgsrc}.jpg`)}
                                style={{ width: '100%',height:'120px',borderRadius:'15px'}}/>
                            </div>
                        </Card.Body>
                    </Card>
                    </div>
                ))}
                <WhiteSpace size="md" />
                <Card>
                    <Card.Header
                        title='客户服务'
                    />
                    <Card.Body>
                        <div>
                            <Grid data={this.state.data2} hasLine={false}
                                onClick={this.handleSwitchTo}    
                            >                                
                            </Grid>
                        </div>
                    </Card.Body>
                   
                </Card>
                <Footer selectTab='index'/>
            </div>
        );
    }
}